<template>
  <div class="page-container">
    <h4>用户数据统计</h4>
    <div class="user-stats-modules">
      <!-- 用户活跃度统计卡片 -->
      <el-card class="stats-card active-users-card">
        <div class="card-content">
          <div class="icon-wrapper">
            <el-icon class="stats-icon"><User /></el-icon>
          </div>
          <div class="stats-details">
            <h3>活跃用户</h3>
            <p class="stats-value">1,248</p>
            <div class="stats-trend">
              <span class="trend-up">
                <el-icon><Top /></el-icon>
                12.5%
              </span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
          <div class="stats-chart">
            <div class="mini-chart"></div>
          </div>
        </div>
      </el-card>

      <!-- 用户增长统计卡片 -->
      <el-card class="stats-card new-users-card">
        <div class="card-content">
          <div class="icon-wrapper">
            <el-icon class="stats-icon"><TrendCharts /></el-icon>
          </div>
          <div class="stats-details">
            <h3>新增用户</h3>
            <p class="stats-value">326</p>
            <div class="stats-trend">
              <span class="trend-down">
                <el-icon><Bottom /></el-icon>
                5.3%
              </span>
              <span class="trend-text">较上月</span>
            </div>
          </div>
          <div class="stats-chart">
            <div class="mini-chart"></div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="search-header">
          <el-icon><Filter /></el-icon>
          <span>筛选查询</span>
        </div>
      </template>
      <el-form :model="queryUser" class="search-form">
        <el-form-item label="用户名">
          <el-input
            v-model="queryUser.username"
            placeholder="请输入用户名"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="queryUser.phone"
            placeholder="请输入手机号"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="queryUser.startRegisterTime"
            type="date"
            placeholder="开始日期"
            format="YYYY-MM-DD"
          />
          <span class="date-separator">至</span>
          <el-date-picker
            v-model="queryUser.endRegisterTime"
            type="date"
            placeholder="结束日期"
            format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item class="action-buttons">
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 用户列表 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>用户列表</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            添加用户
          </el-button>
        </div>
      </template>

      <div v-loading="loading" class="user-grid-container">
        <div v-if="userList.length > 0" class="user-grid">
          <div v-for="user in userList" :key="user.id" class="user-card">
            <div class="user-card-header">
              <div class="user-avatar">
                <span>{{ user.username.charAt(0).toUpperCase() }}</span>
              </div>
              <div class="user-info">
                <span class="user-name">{{ user.username }}</span>
                <span class="user-phone">{{ user.phone }}</span>
              </div>
              <el-tag
                :type="user.status === 1 ? 'success' : 'danger'"
                class="user-status-tag"
                effect="light"
              >
                {{ user.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </div>
            <div class="user-card-body">
              <div class="detail-item">
                <el-icon><Calendar /></el-icon>
                <span>注册于 {{ user.createdAt }}</span>
              </div>
              <div class="detail-item">
                <el-icon><Clock /></el-icon>
                <span>最后登录 {{ user.createdAt }}</span>
              </div>
            </div>
            <div class="user-card-actions">
              <el-button type="primary" link @click="handleEdit(user)">
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button type="warning" link @click="handleResetPassword(user)">
                <el-icon><Key /></el-icon>
                重置密码
              </el-button>
              <el-button
                :type="user.status === 1 ? 'danger' : 'success'"
                link
                @click="handleToggleStatus(user)"
              >
                <el-icon :is="user.status === 1 ? 'Lock' : 'Unlock'" />
                {{ user.status === 1 ? '禁用' : '启用' }}
              </el-button>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无用户数据" />
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="queryUser.current"
            v-model:page-size="queryUser.size"
            :page-sizes="[5, 10, 15, 20]"
            :total="queryUser.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog
        :title="dialogType === 'add' ? '添加用户' : '编辑用户'"
        v-model="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
    >
      <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="dialogType === 'add'">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="/admin/uploadAvatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handelQx">取消</el-button>
          <el-button
              type="primary"
              @click="handleSubmit"
              :loading="submitting"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 重置密码对话框 -->
    <el-dialog
        title="重置密码"
        v-model="resetPasswordVisible"
        width="400px"
        :close-on-click-modal="false"
    >
      <el-form
          ref="passwordFormRef"
          :model="passwordForm"
          :rules="passwordRules"
          label-width="80px"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
              v-model="passwordForm.oldPwd"
              type="password"
              placeholder="请输入原密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input
              v-model="passwordForm.newPwd"
              type="password"
              placeholder="请输入新密码"
              show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="newPwd1">
          <el-input
              v-model="passwordForm.newPwd1"
              type="password"
              placeholder="请再次输入新密码"
              show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetPasswordVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="changePassword"
              :loading="submitting"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {useUserStore} from "@/pinia/index.js";

var useUserStore1 = useUserStore();
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {adminFindPage,adminAdd} from "@/assets/admin.js";
import {
  Search,
  Refresh,
  Plus,
  Edit,
  Key,
  Lock,
  Unlock,
  User,
  Top,
  Bottom,
  TrendCharts,
  Calendar,
  Clock,
  Filter
} from '@element-plus/icons-vue'
import {passwordsUpdate} from "@/assets/user.js";

const submittingPassword = ref(false)
const passwordRules = {
  oldPwd: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
  ],
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
  ],
  newPwd1: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
  ]
}

const passwordForm = ref({
  oldPwd: '',
  newPwd: '',
  newPwd1: ''
})
const passwordFormRef = ref(null)
const changePassword = async () => {
  try {
    await passwordFormRef.value.validate()
    submittingPassword.value = true
    const res = await passwordsUpdate(
        useUserStore1.getUserId,
        passwordForm.value.oldPwd,
        passwordForm.value.newPwd,
        passwordForm.value.newPwd1
    )
    if (res.data.code === 200) {
      ElMessage.success('密码修改成功')
      passwordFormRef.value.resetFields()
    } else {
      ElMessage.error(res.data.message || '密码修改失败')
    }
  } catch (error) {
    if (error?.errors) {
      return
    }
    ElMessage.error('修改密码时发生错误')
    console.error('密码修改错误:', error)
  } finally {
    submittingPassword.value = false
  }
}

// 搜索表单
const searchForm = reactive({
  username: '',
  phone: '',
  dateRange: []
})

// 表格数据
const loading = ref(false)
const userList = ref([])
const queryUser = ref({
  "current":1,
  "size":5,
  "username":null,
  "phone":null,
  "startRegisterTime":null,
  "endRegisterTime":null,
  "total":0
})

const handelUser = () =>{
  // 恢复用户状态（如果使用了方式4）
  const savedPage = sessionStorage.getItem('userListPage')
  const savedSize = sessionStorage.getItem('userListSize')
  const savedUsername = sessionStorage.getItem('userListUsername')
  const savedPhone = sessionStorage.getItem('userListPhone')
  
  if (savedPage) {
    queryUser.value.current = parseInt(savedPage)
    sessionStorage.removeItem('userListPage')
  }
  if (savedSize) {
    queryUser.value.size = parseInt(savedSize)
    sessionStorage.removeItem('userListSize')
  }
  if (savedUsername) {
    queryUser.value.username = savedUsername
    sessionStorage.removeItem('userListUsername')
  }
  if (savedPhone) {
    queryUser.value.phone = savedPhone
    sessionStorage.removeItem('userListPhone')
  }
  
  adminFindPage(queryUser.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      userList.value = res.data.data.records.map(user => ({
        ...user,
        status: user.status || 1 // 默认为启用状态
      }))
      queryUser.value.total = res.data.data.total
    }
  })
}
handelUser()

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const resetSearch = () =>{
  location.reload();
}

// 添加/编辑用户
const dialogVisible = ref(false)
const dialogType = ref('add')
const formRef = ref(null)
const form = ref({
  username: '',
  phone: '',
  password: '',
  avatar: ''
})

// 处理头像上传成功
const handleAvatarSuccess = (res, file) => { 
  console.log('头像上传成功:', res)
  if (res.code === 200) {
    form.value.avatar = res.data // 使用后端返回的URL
    ElMessage.success('头像上传成功')
  } else {
    ElMessage.error(res.message || '头像上传失败')
  }
}

// 处理头像上传失败
const handleAvatarError = (error, file) => {
  console.error('头像上传失败:', error)
  ElMessage.error('头像上传失败，请重试')
}

// 上传前的检查
const beforeAvatarUpload = (file) => { 
  // 支持更多图片格式
  const isImage = file.type.startsWith('image/')
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) { 
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) { 
    ElMessage.error('头像图片大小不能超过 5MB!')
    return false
  }

  return true
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 重置密码
const resetPasswordVisible = ref(false)
const resetPasswordFormRef = ref(null)
const resetPasswordForm = reactive({
  password: '',
  confirmPassword: ''
})

const resetPasswordRules = {
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== resetPasswordForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 提交状态
const submitting = ref(false)

// 搜索
const handleSearch = () => {
queryUser.value.current = 1
  queryUser.value.size = 5
  handelUser()
}

// 分页
const handleSizeChange = (val) => {
  queryUser.value.current = 1
  queryUser.value.size = val
  handelUser()
}

const handleCurrentChange = (val) => {
  queryUser.value.current = val
  handelUser()
}

// 添加用户
const handleAdd = () => {
  dialogType.value = 'add'
  form.username = ''
  form.phone = ''
  form.password = ''
  dialogVisible.value = true
}

// 编辑用户
const handleEdit = (row) => {
  dialogType.value = 'edit'
  form.username = row.username
  form.phone = row.phone
  dialogVisible.value = true
}

const handleSearch1 = () =>{
  queryUser.value.current = 1
  queryUser.value.size = 3
  handelUser()
}

const handelQx = () =>{
  form.value={
    username: '',
    phone: '',
    password: '',
    avatar: ''
  }
  dialogVisible.value = false
  handelUser()
}

// 提交表单
const handleSubmit = async () => {
  adminAdd(form.value).then(res=>{
    console.log(res.data)
    if (res.data.code == 200){
      ElMessage({
        message: res.data.message,
        type: 'success',
      })
      handelQx()
      handelUser()
    }
  })
}

// 重置密码
const handleResetPassword = (row) => {
  resetPasswordForm.password = ''
  resetPasswordForm.confirmPassword = ''
  resetPasswordVisible.value = true
}

const submitResetPassword = async () => {
  if (!resetPasswordFormRef.value) return

  await resetPasswordFormRef.value.validate((valid) => {
    if (valid) {
      submitting.value = true
      setTimeout(() => {
        submitting.value = false
        resetPasswordVisible.value = false
        ElMessage.success('密码重置成功')
      }, 1000)
    }
  })
}

// 切换用户状态 - 与后端接口对接
const handleToggleStatus = (row) => {
  const action = row.status === 1 ? '禁用' : '启用'
  const newStatus = row.status === 1 ? 0 : 1
  
  ElMessageBox.confirm(
      `确定要${action}该用户吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    try {
      console.log('开始切换用户状态，用户ID:', row.id, '当前状态:', row.status)
      
      // 使用FormData方式传递参数
      const formData = new FormData()
      formData.append('userId', row.id)
      
      // 调用后端toggleUserStatus接口
      const response = await fetch('/admin/toggleUserStatus', {
        method: 'POST',
        body: formData
      })

      console.log('接口响应状态:', response.status)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }

      const result = await response.json()
      console.log('接口返回结果:', result)
      
      if (result.code === 200) {
        ElMessage.success(result.message || `${action}成功`)
        
        // 方式1：刷新整个页面（推荐，确保数据完全同步）
        window.location.reload()
        
        // 方式2：只刷新用户列表（更优雅，但可能数据不同步）
        // handelUser()
        
        // 方式3：延迟刷新页面（给用户看到成功消息后再刷新）
        // setTimeout(() => {
        //   window.location.reload()
        // }, 1000)
        
        // 方式4：保持用户状态的刷新（保存当前页面和筛选条件）
        // const currentPage = queryUser.value.current
        // const currentSize = queryUser.value.size
        // const currentUsername = queryUser.value.username
        // const currentPhone = queryUser.value.phone
        // 
        // // 保存到sessionStorage
        // sessionStorage.setItem('userListPage', currentPage)
        // sessionStorage.setItem('userListSize', currentSize)
        // sessionStorage.setItem('userListUsername', currentUsername || '')
        // sessionStorage.setItem('userListPhone', currentPhone || '')
        // 
        // window.location.reload()
        
      } else {
        ElMessage.error(result.message || `${action}失败`)
      }
    } catch (error) {
      console.error('更新用户状态失败:', error)
      ElMessage.error(`${action}失败，请重试: ${error.message}`)
    }
  }).catch(() => {
    // 用户取消操作
    console.log('用户取消操作')
  })
}
</script>

<style scoped>
/* 这里可以添加你的样式 */
.page-container {
  padding: 24px;
  background-color: #f7f8fc;
  min-height: 100vh;
}

.search-card,
.table-card {
  background: #fff;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  transition: box-shadow 0.3s ease;
}

.search-card:hover,
.table-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.page-container h4 {
  font-size: 32px;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-container h4::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  margin: 15px auto 0;
  border-radius: 2px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 24px;
  border-bottom: none;
  color: #2c3e50;
  letter-spacing: 1px;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.user-grid-container {
  min-height: 300px;
  background-color: #E9F7FE;
  border-radius: 8px;
  padding: 20px;
}

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.user-card {
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #d1d8e0;
}

.user-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--el-color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  margin-right: 16px;
  flex-shrink: 0;
}

.user-info {
  flex-grow: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.user-phone {
  font-size: 14px;
  color: #888;
}

.user-status-tag {
  position: absolute;
  top: 0;
  right: 0;
}

.user-card-body {
  margin-bottom: 20px;
  color: #666;
  font-size: 13px;
  border-top: 1px solid #f0f2f5;
  padding-top: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.detail-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.user-card-actions {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  justify-content: space-around;
}

.user-stats-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 12px;
  border: none;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 24px;
  position: relative;
  min-height: 120px;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.stats-icon {
  font-size: 28px;
}

.stats-details h3 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
}

.stats-value {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.stats-trend {
  margin-top: 6px;
  display: flex;
  align-items: center;
  font-size: 13px;
}

.trend-up {
  color: #388e3c;
  display: flex;
  align-items: center;
  margin-right: 8px;
  font-weight: 600;
}

.trend-down {
  color: #d32f2f;
  display: flex;
  align-items: center;
  margin-right: 8px;
  font-weight: 600;
}

.stats-chart {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 60px;
  opacity: 0.5;
}

.mini-chart {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.active-users-card {
  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
}
.active-users-card .icon-wrapper {
  background-color: rgba(255, 255, 255, 0.2);
}
.active-users-card .stats-icon {
  color: white;
}
.active-users-card h3,
.active-users-card .stats-value,
.active-users-card .trend-text {
  color: white;
}

.new-users-card {
  background: linear-gradient(135deg, #fa8c16 0%, #faad14 100%);
}
.new-users-card .icon-wrapper {
  background-color: rgba(255, 255, 255, 0.2);
}
.new-users-card .stats-icon {
  color: white;
}
.new-users-card h3,
.new-users-card .stats-value,
.new-users-card .trend-text {
  color: white;
}

.search-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fe 100%);
  border-radius: 12px;
  border: 1px solid #eef2f8;
}

.search-header {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 1px;
}

.search-header .el-icon {
  margin-right: 10px;
  color: #2c3e50;
  vertical-align: middle;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  padding-top: 10px;
}

.date-separator {
  margin: 0 12px;
  color: #a8abb2;
}

.action-buttons {
  margin-left: auto;
}

.avatar-uploader .el-upload {
  border: 2px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style> 